.gallery {
	position: relative;
	padding: 30px;
	--gallery-side-padding: calc(50vw - min(1680px, var(--global-viewport-content-responsive))/2);

	.scroll-container {
		overflow: scroll;

		position: relative;
		overflow-x: scroll;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		padding: 10px;
		margin: -10px 0;

		.item-container {
			--gallery-column-gap: 20px;

			display: grid;
			grid-template-rows: repeat(1, auto);
			grid-template-columns: max-content;
			grid-auto-flow: column;
			grid-column-gap: var(--gallery-column-gap);
			column-gap: var(--gallery-column-gap);
			grid-row-gap: 0px;
			row-gap: 0px;
			width: -moz-fit-content;
			width: fit-content;

			.feature-card-image-container {
				cursor: pointer;
				clip-path: inset(1px 1px 1px 1px round var(--global-card-corner-radius));
				height: 100%;
				min-height: 560px;
				position: relative;
				will-change: transform;

				.feature-card-image {
					border-radius: var(--global-card-corner-radius);
					overflow: hidden;
					display: block;
					height: 100%;
					width: 100%;

					source,
					img {
						height: 100%;
						width: 100%;
					}
				}

				.feature-card-description{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
					padding: 20px;
					color: white;
					.typography-card-headline{
						color: #f5f5f7;
						margin-top: 8px;
						font-size: 21px;
						line-height: 1.2;
						font-weight: 600;
						letter-spacing: .011em;
						font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
					}
				}
			}

			.feature-card {
				transition: transform .3s cubic-bezier(0, 0, 0.5, 1);
			}
		}
	}

	.feature-card {
		width: 372px;
	}

}


.staggered-start {
	animation: none;
	opacity: 0
}

.gallery-lazy {
	display: block;
	animation: fadeIn calc(var(--global-staggered-opacity-duration)*1s) var(--global-animation-easing-function) both;
	animation-delay: calc(var(--global-staggered-delay)*4s)
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@media only screen and (min-width: 1441px) {
	.gallery .feature-card {
		max-height: 804px;
		min-height: 740px;
	}
}

@media only screen and (max-width: 1068px) {
	.gallery .feature-card {
		max-height: 684px;
		min-height: 628px;
	}
}

@media only screen and (max-width: 734px) {

	.gallery .feature-card {
		max-height: 630px;
		min-height: 480px
	}
}

@media only screen and (min-width: 1441px) {
	.gallery .feature-card {
		width: 405px
	}
}

@media only screen and (max-width: 1068px) {
	.gallery .feature-card {
		width: 344px
	}
}

@media only screen and (max-width: 734px) {
	.gallery .feature-card {
		width: 260px;
	}
}


@media only screen and (min-width: 1441px) {
	html .feature-card:hover {
		transform: scale(1.015)
	}
}

html .feature-card:hover {
	transform: scale(1.016);
}

@media only screen and (max-width: 1068px) {
	html .feature-card:hover {
		transform: scale(1.017)
	}
}

@media only screen and (max-width: 734px) {
	html .feature-card:hover {
		transform: scale(1.023)
	}
}

@media only screen and (min-width: 1441px) {
	.gallery .scroll-container .item-container {
		--gallery-column-gap: 72px;
	}
}

@media only screen and (max-width: 1068px) {
	.gallery .scroll-container .item-container {
		--gallery-column-gap: 72px;
	}
}

@media only screen and (max-width: 734px) {
	.gallery .scroll-container .item-container {
		--gallery-column-gap: 45px;
	}
}